<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

// const production = ref('')
// const ruleForm = reactive({
//   data1:'',
//   data2:'',
//   data3:'',
//   data4:'',

// })
const route = useRoute()
const id = route.query.id

const getHistoryData = () => {
  axios.get('http://localhost:8090/query/searchid/' + id).then((res) => {
    console.log('res.data', res.data)
    dynamicValidateForm.name = res.data.name
    dynamicValidateForm.production = res.data.production
    dynamicValidateForm.value2[0] = res.data.startDate
    dynamicValidateForm.value2[1] = res.data.endDate
    dynamicValidateForm.domains = JSON.parse(res.data.content)
  })
  console.log('dynamicValidateForm.domains', dynamicValidateForm.domains)
}

onMounted(() => {
  if (route.query && route.query.id) {
    getHistoryData()
  }
})

const router = useRouter()
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  domains: DomainItem[]
  name: string
  production: string
  value2: []
}>({
  domains: [
    {
      key: 1,
      value: ''
    }
  ],
  name: '',
  production: '',
  value2: []
})

interface DomainItem {
  key: number
  value: string
}

const removeDomain = (item: DomainItem) => {
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: ''
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (route.query && route.query.id) {
    // 更改
    axios
      .post('http://localhost:8090/query/update/', {
        id: id,
        name: dynamicValidateForm.name,
        production: dynamicValidateForm.production,
        startDate: dynamicValidateForm.value2[0],
        endDate: dynamicValidateForm.value2[1],
        content: JSON.stringify(dynamicValidateForm.domains)
      })
      .then((res) => {
        console.log('res.data', res.data)
        ElMessage({
          message: '更改成功',
          type: 'success'
        })
        router.push('/query/search')
      })
  } else {
    // 新增
    axios
      .post('http://localhost:8090/query/add', {
        name: dynamicValidateForm.name,
        production: dynamicValidateForm.production,
        startDate: dynamicValidateForm.value2[0],
        endDate: dynamicValidateForm.value2[1],
        content: JSON.stringify(dynamicValidateForm.domains)
      })
      .then((res) => {
        console.log('res.data', res.data)
        ElMessage({
          message: '添加成功',
          type: 'success'
        })
        router.push('/query/search')
      })
  }
}

const noAction = () => {
  router.push('/query/search')
}
</script>

<template>
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="dynamicValidateForm"
    label-width="auto"
    class="demo-dynamic"
    required
  >
    <!-- prop="name" -->
    <el-form-item v-model="dynamicValidateForm.name" label="标题" required>
      <el-input v-model="dynamicValidateForm.name" />
    </el-form-item>
    <div style="margin-right: 20px; text-align: center; height: 52px; display: inline-block">
      简介
    </div>
    <el-input
      v-model="dynamicValidateForm.production"
      style="width: 240px; margin-bottom: 20px"
      :rows="2"
      type="textarea"
      placeholder="请输入简介"
    />
    <!-- 
  <el-form-item label="开始时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="dynamicValidateForm.date1"
            type="date"
            label="startDate"
            placeholder="开始日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="dynamicValidateForm.date2"
            label="startTime"
            placeholder="开始时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item> -->

    <!-- <el-form-item label="结束时间" required>
      <el-col :span="11">
        <el-form-item prop="date3">
          <el-date-picker
            v-model="dynamicValidateForm.date3"
            type="date"
            label="endDate"
            placeholder="结束日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date4">
          <el-time-picker
            v-model="dynamicValidateForm.date4"
            label="endTime"
            placeholder="结束时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item> -->

    <div class="demo-datetime-picker">
      <div class="block">
        <el-date-picker
          v-model="dynamicValidateForm.value2"
          type="datetimerange"
          start-placeholder="Start date"
          end-placeholder="End date"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
    </div>

    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      :label="'题目' + index"
      :prop="'domains.' + index + '.value'"
      :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur'
      }"
    >
      <el-input v-model="domain.value" />
      <el-button class="mt-2" @click.prevent="removeDomain(domain)"> 删除题目 </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
      <el-button @click="addDomain">添加题目</el-button>

      <el-button @click="noAction">取消</el-button>
    </el-form-item>
  </el-form>
</template>
